<!DOCTYPE html>
<html class="x-admin-sm">
	<head>
		<meta charset="UTF-8">
		<title>{$adminset.name}</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport"
			content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
		<link rel="stylesheet" href="{__ADMIN_STATIC__}/css/font.css">
		<link rel="stylesheet" href="{__ADMIN_STATIC__}/css/xadmin.css">
		<script src="{__ADMIN_STATIC__}/lib/layui/layui.js" charset="utf-8"></script>
		<script type="text/javascript" src="{__ADMIN_STATIC__}/js/xadmin.js"></script>

	</head>
	<body>

		<div class="layui-fluid">
			<div class="layui-row">

				<div class="layui-col-md10" style="border: 1px solid #fff;height:700px;">

					<form class="layui-form" action="">

						<div class="layui-col-md9">

							<!--标题区-->
							<div class="layui-form-item" style="margin-top:20px;">
								<label class="layui-form-label">海报名称</label>
								<div class="layui-input-block">
									<input type="text" name="postername" placeholder="请输入标题" autocomplete="off"
										class="layui-input">
								</div>
							</div>
						</div>


						<div class="layui-col-md12">
							<!--预览区-->
							<div class="layui-col-md4" style="margin:0px 20px;">
								<div class="layui-form-item">
									<div style="background-color:#fff;height:500px;width:320px;margin: 0 auto;">
										<div id="poster"
											style="width: 320px;height: 480px;border: 1px solid #ccc;position: relative;">
											<img id="back" width="320px" height="480px;" src="" />
										</div>
									</div>
								</div>
							</div>

							<div class="layui-col-md6">
								<div class="layui-form-item">

									<div style="background-color:#fff;height:480px;width:100%;padding-top:20px;">

										<div class="layui-form-item">
											<label for="username" class="layui-form-label">
												上传
											</label>
											<button type="button" class="layui-btn" id="test1">
												<i class="layui-icon">&#xe67c;</i>上传活动图片
											</button>
										</div>

										<div class="layui-form-item" id="div_img_one">
											<label for="username" class="layui-form-label">
												图片路径
											</label>
											<div class="layui-col-xs8">
												<input type="text" name="pic" id="img_path" value=""
													class="layui-input layui-disabled">
											</div>
										</div>

										<div class="layui-form-item" id="div_img_two">
											<label class="layui-form-label">缩略图
											</label>
											<img id="img_res" width="150" height="200"
												src='{__ADMIN_STATIC__}/images/slt2.jpg'>

											<i class="layui-icon layui-icon-delete" onclick="delimg()"
												style="font-size: 30px; color: #1E9FFF;">删除</i>
										</div>

										<div class="layui-form-item">
											<label class="layui-form-label">海报元素</label>
											<div class="layui-input-block">

												<div class="layui-btn" id="heatbtn">头像</div>
												<div class="layui-btn" id="nickbtn">呢称</div>
												<div class="layui-btn" id="codebtn">二维码</div>
												<div class="layui-btn" id="ziliaobtn">资料</div>
												<div class="layui-btn" id="test">加载背景图</div>
											</div>
										</div>

										<div id="nameset" class="layui-form-item" style="width:80%;">
											<label class="layui-form-label">呢称颜色</label>

											<div class="layui-input-block">
												<select name="city" lay-verify="required">
													<option value="black">黑色</option>
													<option value="white">白色</option>
													<option value="red">红色</option>
													<option value="green">绿色</option>
													<option value="yellow">黄色</option>
													<option value="blue">蓝色</option>
												</select>
											</div>
										</div>

										<div id="headset" class="layui-form-item" style="width:80%;display:none;">
											<label class="layui-form-label">头像大小</label>

											<div class="layui-input-block">
												<select name="headsize" lay-verify="required">
													<option value="30">小</option>
													<option value="60">中</option>
													<option value="90">大</option>
												</select>
											</div>
										</div>

										<div id="codeset" class="layui-form-item" style="width:80%;display:none;">
											<label class="layui-form-label">二维码大小</label>

											<div class="layui-input-block">
												<select name="headsize" lay-verify="required">
													<option value="30">小</option>
													<option value="60">中</option>
													<option value="90">大</option>
												</select>
											</div>
										</div>


									</div>

								</div>
							</div>

						</div>

						<div class="layui-col-md12">

							<div class="layui-form-item">
								<div class="layui-input-block">
									<button class="layui-btn" lay-submit lay-filter="formDemo">添加</button>
									<button type="reset" class="layui-btn layui-btn-primary">重置</button>
								</div>
							</div>
						</div>

					</form>

				</div>

			</div>
		</div>


		<script>
			layui.use(['form', 'layer', 'upload'],
				function() {
					$ = layui.jquery;
					var form = layui.form,
						layer = layui.layer;
					var upload = layui.upload;

					//执行实例
					var uploadInst = upload.render({
						elem: '#test1' //绑定元素
							,
						url: '{:url("Uploader/upload")}',
						done: function(res) {
							$('#div_img_two').css('display', 'block');
							$('#div_img_one').css('display', 'block');
							$('#img_path').val(res.path); //图片链接
							$('#img_res').attr('src', res.path); //图片链接
							$('#back').attr('src', res.path); //图片链接
						},
						error: function() {
							//请求异常回调
						}
					});
				});
		</script>



		<script src="https://apps.bdimg.com/libs/jquery/1.7.0/jquery.js"></script>


		<script>
			var jq142 = jQuery.noConflict(true);
		</script>

		<script>
			(function($) {


				//删除图片操作
				$(".close").live("click", function() {
					$('#tddiv').remove();
				});

				//删除头像操作
				$(".nmaeclose").live("click", function() {
					$('#nickname').remove();
				});

				//删除呢称操作
				$(".headclose").live("click", function() {
					$('#headdiv').remove();
				});

				//二维码拖动事件
				$("#tddiv").live('mousedown', function(e) { //e鼠标事件 
					//var offset = $(this).offset();//DIV在页面的位置  一般使用offset
					var x = e.clientX - $(this).offset().left; //获得鼠标指针离DIV元素左边界的距离 
					var y = e.clientY - $(this).offset().top; //获得鼠标指针离DIV元素上边界的距离 

					var ewmx = $('#poster').offset().left; //获得鼠标指针离DIV元素左边界的距离 
					var ewmy = $('#poster').offset().top;
					$('title').html(x + '--' + y);
					$(document).bind('mousemove', function(e) {
						$("#tddiv").css({
							'left': (e.clientX - x - ewmx) + "px",
							'top': (e.clientY - y - ewmy) + 'px'
						});
						return false;
					})

					$(document).bind('mouseup', function(e) {
						$(document).unbind('mousemove');
					})

				});

				//头像拖动事件
				$("#headdiv").live('mousedown', function(e) { //e鼠标事件 
		 		//var offset = $(this).offset();//DIV在页面的位置  一般使用offset
					var x = e.clientX - $(this).offset().left; //获得鼠标指针离DIV元素左边界的距离 
					var y = e.clientY - $(this).offset().top; //获得鼠标指针离DIV元素上边界的距离 

					var headx = $('#poster').offset().left; //获得鼠标指针离DIV元素左边界的距离 
					var heady = $('#poster').offset().top;
					$('title').html(x + '--' + y);
					$(document).bind('mousemove', function(e) {
						$("#headdiv").css({
							'left': (e.clientX - x - headx) + "px",
							'top': (e.clientY - y - heady) + 'px'
						});
						return false;
					})

					$(document).bind('mouseup', function(e) {
						$(document).unbind('mousemove');
					})

				});

				//用户呢称拖动事件
				$("#nickname").live('mousedown', function(e) { //e鼠标事件 
					//var offset = $(this).offset();//DIV在页面的位置  一般使用offset
					var x = e.clientX - $(this).offset().left; //获得鼠标指针离DIV元素左边界的距离 
					var y = e.clientY - $(this).offset().top; //获得鼠标指针离DIV元素上边界的距离 

					var nickx = $('#poster').offset().left; //获得鼠标指针离DIV元素左边界的距离 
					var nicky = $('#poster').offset().top;
					$('title').html(x + '--' + y);
					$(document).bind('mousemove', function(e) {
						$("#nickname").css({
							'left': (e.clientX - x - nickx) + "px",
							'top': (e.clientY - y - nicky) + 'px'
						});
						return false;
					})

					$(document).bind('mouseup', function(e) {
						$(document).unbind('mousemove');
					})
				});


			})(jq142);
		</script>


		<script type="text/javascript" src="{__INDEX_STATIC__}/js/jquery-3.4.1.min.js"></script>

		<script type="text/javascript">
			function delimg() {
				var img_path = $('#img_path').val();
				$.ajax({
					url: "{:url('Uploader/img_del')}",
					method: 'post',
					data: {
						img_path: img_path
					},
					dataType: 'JSON',
					success: function(date) {
						if (date.code = '1') {
							$('#div_img_one').css('display', 'none');
							$('#div_img_two').css('display', 'none');
							$('#img_path').val(""); //图片链接
							layer.msg(date.info, {
								icon: 6
							});
						} else {
							layer.msg(date.info, {
								icon: 5
							});
						}
					},
					error: function(date) {
						layer.msg(date.info, {
							icon: 5
						});
					}
				})
			}
		</script>

		<script type="text/javascript">
			$(function() {


				$("#test").click(function() {
					var ok123 = $(".img-responsive").eq(2).attr("src");
					$('#back').attr("src", ok123);
				});
				///头像处理
				$("#heatbtn").click(function() {
					$("#poster").append(
						'<div id="headdiv" style="margin-top:.5em;position:absolute;  left:0; top:0px"> <img src="{__ADMIN_STATIC__}/images/head.png" id="head" width="33px" height="33px"><em class="headclose" style="position:absolute; top: 0px; right: -14px;">×</em></div>'
						);
			 	$('#nameset').hide();
					$('#qrset').hide();
					$('#headset').show();
				});
				///头像大小
				$("#headset").change(function() {
					var headsize = $("#headsize").val();
					$("#head").css({
						"width": headsize,
						"height": headsize
					});

				});
				///呢称处理
				$("#nickbtn").click(function() {
					$("#poster").append(
						'<div id="nickname" style="margin-top:.5em;position:absolute;  left:0; top:0px"><h4 id="h4" style="color:black;">微信呢称</h4><em class="nmaeclose" style="position:absolute; top: 0px; right: -14px;">×</em></div>'
						);
					$('#nameset').show();
					$('#codeset').hide();
					$('#headset').hide();
				});

				///呢称颜色
				$("#namecolor").change(function() {
					var namecolor = $("#namecolor").val();
					$("#h4").css("color", namecolor);

				});

				///二维码处理
				$("#codebtn").click(function() {
					$("#poster").append(
						'<div id="tddiv" style="margin-top:.5em; position:absolute;  left:0; top:0px"> <img src="{__ADMIN_STATIC__}/images/code.png" id="code" width="35px" height="35px"><em class="close" style="position:absolute; top: 0px; right: -14px;">×</em></div>'
						);
					$('#nameset').hide();
					$('#codeset').show();
					$('#headset').hide();
				});
				///二维码大小
				$("#codeset").change(function() {
					var codesize = $("#codesize").val();
					$("#code").css({
						"width": codesize,
						"height": codesize
					});
				});



				$("#sub").click(function() {
					var postername = $("input[name='postername']").val();
					var poster = $(".img-responsive").eq(2).attr("src");
					var headx = $("#headdiv").css("left");
					var heady = $("#headdiv").css("top");
					var headw = $("#headdiv img").css("width");

					var nickx = $("#nickname").css("left");
					var nicky = $("#nickname").css("top");

					var ewmx = $("#tddiv").css("left");
					var ewmy = $("#tddiv").css("top");
					var ewmw = $("#tddiv img").css("width");

					var data = '&postername=' + postername + '&poster=' + poster + '&headx=' + headx +
						'&heady=' + heady + '&headw=' + headw + '&nickx=' + nickx + '&nicky=' + nicky +
						'&ewmx=' + ewmx + '&ewmy=' + ewmy + '&ewmw=' + ewmw;

				});


			});
		</script>


		{include file="public/footer"}
